<template>
    <div class="header">
        <div class="logo hidden-md-and-down" v-if="!collapse">企业综合管理系统</div>

        <!-- 折叠按钮 -->
        <div class="collapse-btn" @click="collapseChage">
            <i v-if="!collapse" class="el-icon-s-fold"></i>
            <i v-else class="el-icon-s-unfold"></i>
        </div>

        <div class="header-right">
            <div class="header-user-con">
                <!-- 全屏显示 -->
                <div class="btn-fullscreen hidden-md-and-down" @click="handleFullScreen">
                    <el-tooltip effect="dark" :content="fullscreen?`取消全屏`:`全屏`" placement="bottom">
                        <i class="el-icon-rank"></i>
                    </el-tooltip>
                </div>
                <!-- 用户头像 -->
                <el-tooltip
                    class="item"
                    effect="light"
                    :content="$store.state.userData.username"
                    placement="top"
                >
                    <div class="user-avator hidden-md-and-down">
                        <img src="../../assets/img/img.jpg" />
                    </div>
                </el-tooltip>
                <!-- 用户名下拉菜单 -->
                <el-dropdown class="user-name" trigger="click" @command="handleCommand">
                    <span class="el-dropdown-link">
                        <!-- {{username}} -->
                        综合管理平台
                        <i class="el-icon-caret-bottom"></i>
                    </span>
                    <el-dropdown-menu slot="dropdown">
                        <!-- <el-dropdown-item divided command="webpage">企业官网</el-dropdown-item>
                        <el-dropdown-item divided command="finace">财务平台</el-dropdown-item>-->

                        <el-dropdown-item
                            v-for="(item, index) in roleTree"
                            :key="index"
                            divided
                            :command="item"
                        >{{item.name}}</el-dropdown-item>

                        <el-dropdown-item divided command="loginout">退出登录</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </div>
        </div>
        <ul class="nav flex">
            <li
                v-for="(item, index) in navList"
                :key="index"
                :class="currentNav === index ? 'on' : ''"
                @click="getLeftMenu(item, index)"
            >
                <img
                    :src="require(`../../assets/img/top-menu/${item.icoStyle == null?'icon01':item.icoStyle}.png`)"
                />
                <div>{{item.name}}</div>
            </li>
        </ul>
    </div>
</template>
<script>
import bus from '../common/bus';
import { menus } from '../../utils/menu.js';
import appMain from '../../utils/app_main';
import _ from 'lodash';
// import appMain from ''
export default {
    data() {
        return {
            collapse: false,
            fullscreen: false,
            name: 'admin',
            message: 2,
            navList: [],
            navListFinace: [
                {
                    name: '人事',
                    icon: 'icon01',
                    menuName: 'employee'
                },
                // {
                //     name: '行政',
                //     icon: 'icon02',
                //     menuName: 'administration'
                // },
                // {
                //     name: '流程',
                //     icon: 'icon03',
                //     menuName: ''
                // },
                {
                    name: '客户',
                    icon: 'icon04',
                    menuName: 'customer'
                },
                // {
                //     name: '组织机构',
                //     icon: 'icon05',
                //     menuName: ''
                // },
                {
                    name: '基础资料',
                    icon: 'icon06',
                    menuName: 'baseData'
                },
                // {
                //     name: '资料管理',
                //     icon: 'icon07',
                //     menuName: ''
                // },
                // {
                //     name: '通知',
                //     icon: 'icon08',
                //     menuName: 'customer'
                // },
                // {
                //     name: '报告',
                //     icon: 'icon09',
                //     menuName: 'baseData'
                // },
                // {
                //     name: '任务',
                //     icon: 'icon10',
                //     menuName: 'baseData'
                // },
                // {
                //     name: '计划',
                //     icon: 'icon11',
                //     menuName: 'baseData'
                // },
                // {
                //     name: '考勤',
                //     icon: 'icon12',
                //     menuName: 'baseData'
                // },
                {
                    name: '系统',
                    icon: 'icon13',
                    menuName: 'system'
                },
                {
                    name: '财务',
                    icon: 'icon14',
                    menuName: 'finance'
                }
            ],
            navListWeb: [
                {
                    name: '官网后台',
                    icon: 'icon15',
                    menuName: 'webpage'
                },
                {
                    name: '系统',
                    icon: 'icon13',
                    menuName: 'system'
                }
            ],
            currentNav: 0,
            //权限树
            roleTree: []
        };
    },
    computed: {
        username() {
            // let username = localStorage.getItem('ms_username');
            let username = this.$store.state.userData.username;
            return username ? username : this.name;
        }
    },
    methods: {
        // 用户名下拉菜单选择事件
        handleCommand(command) {
            if (command == 'loginout') {
                //localStorage.removeItem('ms_username');
                this.$store.commit('changeToken', '');
                this.$router.push('/login');
                this.logout();
                //localStorage.removeItem('ms_username');
                window.sessionStorage.removeItem('store');
                return;
            }

            console.log('command', command);
            this.navList = command.children;
            console.log('navList', this.navList);
            this.$store.commit('changeNavList', command.children);

            //跳转到当前系统的最后一个模块

            // if (command.name == '企业官网') {
            //     //跳转到最后一个模块的菜单
            // } else if (command.name == '财务平台') {
            //     this.$router.push('/');
            // }
            let type = _.cloneDeep(command.children);
            let length = type.length;

            this.getLeftMenu(type[length - 1], length - 1);
            if (this.$route.path != '/organization') {
                this.$router.push('/organization'); //跳转到组织机构
            }
        },
        logout() {
            appMain
                .logout()
                .then(res => {
                    if (res.data.code === 20000) {
                        this.$store.commit('resetStore', '');
                    } else {
                        this.$message.error(res.data.message);
                    }
                })
                .catch(err => {
                    console.log(err);
                });
        },
        // 侧边栏折叠
        collapseChage() {
            this.collapse = !this.collapse;
            bus.$emit('collapse', this.collapse);
        },
        // 全屏事件
        handleFullScreen() {
            let element = document.documentElement;
            if (this.fullscreen) {
                if (document.exitFullscreen) {
                    document.exitFullscreen();
                } else if (document.webkitCancelFullScreen) {
                    document.webkitCancelFullScreen();
                } else if (document.mozCancelFullScreen) {
                    document.mozCancelFullScreen();
                } else if (document.msExitFullscreen) {
                    document.msExitFullscreen();
                }
            } else {
                if (element.requestFullscreen) {
                    element.requestFullscreen();
                } else if (element.webkitRequestFullScreen) {
                    element.webkitRequestFullScreen();
                } else if (element.mozRequestFullScreen) {
                    element.mozRequestFullScreen();
                } else if (element.msRequestFullscreen) {
                    // IE11
                    element.msRequestFullscreen();
                }
            }
            this.fullscreen = !this.fullscreen;
        },
        // 获取顶部菜单
        getNav() {
            // this.navList=[
            //     {
            //         title: '人事',
            //         menu:''
            //     }
            // ]
        },
        //递归获取树有url为止
        getTreeUrl(treeData) {
            if (treeData.length < 1) {
                return;
            }
            console.log('getTreeUrl treeData', treeData);
            if (typeof treeData[0].url == 'undefined') {
                this.getTreeUrl(treeData[0].children);
            } else {
                this.$router.push(treeData[0].url);
                console.log('getTreeUrl', treeData[0].url);
            }
        },
        getLeftMenu(type, index) {
            console.log('getLeftMenu', type.name);
            console.log('getLeftMenu index', index);
            // return;
            if (type.name == '官网后台') {
                this.$confirm('即将跳转到官网管理后台, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                })
                    .then(() => {
                        console.log('url--info', window.location.host);
                        let host = window.location.host;
                        if (host == 'localhost:8080') {
                            window.open(
                                'http://webpage.www.lyuyan.com' +
                                    '/#/login' +
                                    '?token_mark=' +
                                    this.$store.state.token_mark +
                                    '&userInfo=' +
                                    JSON.stringify(this.$store.state.userData) +
                                    '&ms_username=' +
                                    this.$store.state.userData.username
                            );
                        } else {
                            host = host.replace('admin', 'webpage');
                            window.open(
                                'http://' +
                                    host +
                                    '/#/login' +
                                    '?token_mark=' +
                                    this.$store.state.token_mark +
                                    '&userInfo=' +
                                    JSON.stringify(this.$store.state.userData) +
                                    '&ms_username=' +
                                    this.$store.state.userData.username
                            );
                        }
                    })
                    .catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消'
                        });
                    });

                return;
            }

            //console.log(menus, index);
            //let menu = menus[type];
            let menu = type.children;
            console.log('menus type', menu);
            bus.$emit('menu', menu);
            this.currentNav = index;
            let menuData = {
                menu: menu,
                index: this.currentNav
            };
            this.$store.commit('changeMenu', menuData);
                    this.getTreeUrl(menu);
        }
    },
    created() {
        //权限树
        this.roleTree = this.$store.state.loadApply;
        console.log('roleTree', this.roleTree);
        this.navList = this.$store.state.navList;
        // if(this.navList.length == 0){
        //     this.navList = this.roleTree[0].children;
        // }
        console.log('navList', this.navList);
        this.currentNav = this.$store.state.menuData.index;
        let menuData = this.$store.state.menuData;
        let menu = menuData.menu
        if(menuData.menu.length == 0){
            menu = this.navList[1].children;
        }
        console.log('menuData menu', menu);
        bus.$emit('menu', menu);

        //如果navlist为空
        if (this.navList.length < 1) {
            this.navList = this.roleTree[0].children;
            console.log('navList123', this.navList);
            
            this.$store.commit('changeNavList', this.roleTree[0].children);
             let menuData = {
                menu: this.roleTree[0].children[1].children,
                index: this.currentNav
            };
            console.log('navList menuData', this.roleTree[0].children[1]);
            this.$store.commit('changeMenu', menuData);
        }
    },
    mounted() {
        if (document.body.clientWidth < 1500) {
            this.collapseChage();
        }
        if (document.body.clientWidth < 1200) {
        }
        this.getNav();
    }
};
</script>
<style scoped>
.header {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    height: 70px;
    font-size: 22px;
    color: #fff;
    background-image: url('../../assets/top-menu.png');
}
.collapse-btn {
    float: left;
    padding: 0 21px;
    cursor: pointer;
    line-height: 70px;
}
.header .logo {
    float: left;
    width: 230px;
    line-height: 70px;
}
.logo {
    padding-left: 20px;
}
.header-right {
    float: right;
    padding-right: 50px;
}
.header-user-con {
    display: flex;
    height: 70px;
    align-items: center;
}
.btn-fullscreen {
    transform: rotate(45deg);
    margin-right: 5px;
    font-size: 24px;
}
.btn-bell,
.btn-fullscreen {
    position: relative;
    width: 30px;
    height: 30px;
    text-align: center;
    border-radius: 15px;
    cursor: pointer;
}
.btn-bell-badge {
    position: absolute;
    right: 0;
    top: -2px;
    width: 8px;
    height: 8px;
    border-radius: 4px;
    background: #f56c6c;
    color: #fff;
}
.btn-bell .el-icon-bell {
    color: #fff;
}
.user-name {
    margin-left: 10px;
}
.user-avator {
    margin-left: 20px;
}
.user-avator img {
    display: block;
    width: 40px;
    height: 40px;
    border-radius: 50%;
}
.el-dropdown-link {
    color: #fff;
    cursor: pointer;
}
.el-dropdown-menu__item {
    text-align: center;
}
.header .nav {
    position: relative;
    right: 0px;
    top: 0;
    justify-content: flex-end;
}
.header .nav li {
    margin-top: 5px;
    padding: 5px 10px;
    text-align: center;
    min-width: 40px;
    font-size: 12px;
    list-style: none;
}
.header .nav li.on {
    background-color: rgba(255, 255, 255, 0.65) !important;
    color: #333;
}
.header .nav li img {
    width: 32px;
    height: 32px;
}
</style>
